<template>
    <div id="home">
        <!-- 父组件通过props给子组件传值演示 -->
        <h2>{{msg}}</h2>
        <!-- <v-header :title="title" :run="run" :home="this"></v-header> -->
        
        <!-- 父组件主动获取子组件的数据和方法演示 -->
        <v-header ref="header"></v-header>
        <button @click="getChildData()">Home.vue获取子组件的数据</button>
        <button @click="getChildMethod()">Home.vue获取子组件的方法</button>

        <!-- 非父子组件之间传值演示 -->
        <br><br>
        <button @click="emitNews()">给News组件广播数据</button>

        <!-- 请求数据演示 -->
        <hr>
        <button @click="getData()">从后台请求数据</button>
        <ul v-for="item in list">
            <li>{{item.title}}</li>
        </ul>
    </div>
</template>

<script>
import Axios from 'axios';
import Header from './Header.vue'
import VueEvent from '../model/vueEvent.js'

export default {
    data(){
        return{
            msg:'我是一个Home组件',
            title:'首页',   //父组件的值无法再子组件中直接使用(无法再Header.vue中使用)
            list:[]
        }
    },
    methods:{
        getData(){
            var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            // ~~~~~使用vue-resource
            // this.$http.get(api).then(function(response){
            //     console.log(response);
            // },function(err){
            //     console.log(err);
            // })
            // 注意this指向,使用箭头函数就没有指向问题
            //  this.$http.get(api).then(response=>{
            //     console.log(response);
            //     this.list=response.body.result;
            // },err=>{
            //     console.log(err);
            // })

            // ~~~~~使用axios
            Axios.get(api).then(response=> {
                // handle success
                console.log(response);
                this.list=response.data.result;
            }).catch(error=> {
                // handle error
                console.log(error);
            })
        },
        run(data){
            alert('我是Home组件的run方法: '+data);
        },
        getChildData(){
            alert(this.$refs.header.msg);
        },
        getChildMethod(){
            this.$refs.header.runInHeader();
        },
        emitNews(){
            VueEvent.$emit('to-news',this.msg);
        }
    },
    components:{
        'v-header':Header
    },
    mounted(){
        // 页面刷新时就展示请求的数据
        // this.getData();
        VueEvent.$on('to-home',function(data){
            console.log(data);
        })
    }
}
</script>

